<template>
  <div class="app-container">
    <div>
      <!--工具栏-->
      <div class="head-container">
        <!--表格渲染-->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">
                <span class="role-span">产品型号</span>
              </div>
              <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
              <crudOperation :permission="permission" />
              <!--表格渲染-->
              <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%" 
                @current-change="handleCurrentChange" highlight-current-row max-height="400">
                <el-table-column prop="productCode" label="产品型号" width="150px" align="center"/>
                <el-table-column prop="productName" label="产品名称" width="150px" align="center"/>
                <el-table-column prop="productType" label="产品类型" width="110px" align="center"/>
              </el-table>
              <!--分页组件-->
              <pagination />
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span  class="role-span">参数列表</span>
                <el-button slot="right" class="filter-item" type="primary" size="mini" :loading="crud.downloadLoading"
                  :disabled="!showButton" @click="toSaveParam" style="float: right; padding: 6px 9px"> 保存参数
                </el-button>
              </div>
              <el-tree ref="paramDetail" :data="treeData" :default-checked-keys="paramDetailIds"
                :props="defaultProps" check-strictly accordion show-checkbox node-key="id" @check="paramDetailChange"
              />
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
  
<script>
  import crudProductModel from "@/api/product/productModel";
  import { getCraftParamId } from '@/api/craft/craftParam';
  import { getList } from '@/api/craft/craftParamDetail';
  import CRUD, { presenter, header, form, crud } from "@crud/crud";
  import rrOperation from "@crud/RR.operation";
  import crudOperation from "@crud/CRUD.operation";
  import udOperation from "@crud/UD.operation";
  import pagination from "@crud/Pagination";
  import { editProductParameter } from "@/api/data/dataMain"

  const defaultForm = { id: null, productCode: null, productName: null, productType: null, materialCode: null, 
    remark: null, createBy: null, createTime: null, updateBy: null, updateTime: null, lines : []
  };
  export default {
    components: { pagination, crudOperation, rrOperation, udOperation },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    cruds() {
      return CRUD({
        title: "产品型号",
        url: "api/productModel",
        idField: "id",
        sort: "id,desc",
        optShow: {
          add: false,
          del: false,
          download: false,
          reset: false,
          import: false
        },
        queryOnPresenterCreated: false,
        crudMethod: { ...crudProductModel },
      });
    },
    data() {
      return {
        isDisabled: true,
        options: [],
        //树配置
        defaultProps: {
          label: "label",
        },
        treeData:[],
        productId: 0,
        paramDetailIds:[],
        showButton: false,
        props: {
            checkStrictly: true,
            multiple: true,
        },
        permission: {
            add: ["admin", "dict:add"],
            edit: ["admin", "dict:edit"],
            del: ["admin", "dict:del"],
        },
        rules: {
            productCode: [
                { required: true, message: "产品型号不能为空", trigger: "blur" },
            ],
            productName: [
                { required: true, message: "产品名称不能为空", trigger: "blur" },
            ],
            productType: [
                { required: true, message: "产品类型不能为空", trigger: "blur" },
            ],
            materialCode: [
                { required: true, message: "关联物料不能为空", trigger: "blur" },
            ],
            lines: [
                { required: true, message: "关联产线不能为空", trigger: "blur" },
            ]
        },
      };
    },
    methods: {
      //初始化树
      initTree(val){
        getList({paramsId: val}).then( res => {
          this.treeData = res;
        })
      },
      // 选中类型后，展示产品详情
      handleCurrentChange(val) {
        if (val) {
          getCraftParamId({productCode:val.productCode}).then(data => {
            if(data.id){
              this.initTree(data.id)
            }else {
              this.initTree('0')
            }      
          })
          this.productId = val.id
          this.$refs.paramDetail.setCheckedKeys([])
          // 初始化默认选中的key
          this.paramDetailIds = []
          val.craftParamDetails.forEach( param => {
            this.paramDetailIds.push(param.id)
          })
          console.log(this.paramDetailIds)
          this.showButton = true;
        }
      },
      // 保存参数
      toSaveParam(){
        this.crud.downloadLoading = true;
        const productParameters = { id: this.productId, craftParam: [] }
        // 得到已选中的 key 值
        this.paramDetailIds.forEach(function(id){
          const param = { id: id }
          productParameters.craftParam.push(param)
        })
        editProductParameter(productParameters).then(() => {
          this.crud.notify('保存参数成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          this.crud.toQuery();
          this.crud.downloadLoading = false;
        }).catch(err => {
          console.log(err.response.data.message)
        })
      },
      paramDetailChange(){
        this.paramDetailIds = this.$refs.paramDetail.getCheckedKeys();
      }
    },
    mounted() {
      this.crud.toQuery();
      this.initTree('');
    }    
  };
</script>
<style scoped>
</style> 